<template>
  <div>
    <br />
    <a-card title="PDF">
      <a-row>
        <a-col span="2">PDF查看</a-col>
        <a-col span="22">
          <a-button
            class="btn"
            type="primary"
            size="small"
            @click="btnClick(true)"
          >
            自定义组件
          </a-button>
          <a-button
            class="btn"
            type="primary"
            size="small"
            @click="btnClick(false)"
          >
            PDF.js
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <input-modal ref="InputModal" :title="pdfType ? '自定义组件' : 'PDF.js'" label="文件路径" @success="inputSuccess" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import InputModal, { InputModalComType } from '@/components/global/modal/input'

@Component({
  name: 'ComWebToolPdf',
  components: {
    InputModal
  }
})
export default class ComWebToolPdf extends Vue {
  pdfType = false

  btnClick (type: boolean) {
    this.pdfType = type;
    (this.$refs.InputModal as InputModalComType).show()
  }

  inputSuccess (value: string) {
    const query = `?file=${value}`
    window.open(
      `${this.pdfType ? 'https://wangyabin.top/webserver-api/pdf/pdfjs' : 'https://wangyabin.top/webserver-api/pdf/pdfvue'}${query}`
    )
  }
}
</script>

<style scoped></style>
